<template>
	<view >
		<view v-if="list==null&&status!='loadmore'">
			<u-empty       text="未查询到订单详情"    icon="https://cdn.uviewui.com/uview/empty/history.png"></u-empty>
		</view>
		<view v-else class="content">
			<span class="fontweight">护理员服务>{{statuSwitch(list.receiveStatus)}}
				<text style="color: red;" v-if="list.orderStatus==0&&list.finalPrice!=0"> 待客户支付尾款</text>
			</span>
			<view class="content1">
				<u-steps  direction="column" dot activeColor="#ffd02b" inactiveColor="#00ac4e">
					<u-steps-item :title="list.userAddress" :desc="list.address">
					</u-steps-item>
				</u-steps>  
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="6">
						<view class="">
							<!-- <view >
								<u-button icon="phone" plain
									type="primary" shape="circle"size="small" text="获取当前位置" @click="getLocation"
									 
								></u-button>
							</view> -->
						</view>
					</u-col>
					<u-col span="3">
						<view >
							<u-button icon="phone" plain
								type="primary" shape="circle"size="small" text="联系客户" @click="getPhoneNumber(list.userPhone)"
								  color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
							></u-button>
						</view>
					</u-col>
					<u-col span="3">
						<view >
							<u-button icon="map" plain
								type="primary" shape="circle"size="small" text="导航" @click="mapFun(list)"
								  color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
							></u-button>
							
						</view>
					</u-col>
					
				</u-row>
			</view>
			<view class="lines">
				<u-line></u-line>
			</view>
			<span class="fontweight">订单信息</span>
			<view class="content2">
				<p>
				<view class="line">
					<view class="left"><p>服务项目</p></view>
					<view class="right"><p>{{list.serveName}}</p></view>
				</view>
				</p>
			<!-- 	<view class="line">
					<view class="left"><p>服务地址</p></view>
					<view class="right"><p>{{list.address}}</p></view>
				</view> -->
				<p>
				<view class="line">
					<view class="left"><p>联系方式</p></view>
					<view class="right"><p>{{list.userPhone}}（{{list.userName}}）</p></view>
				</view>
				</p>
				<p>
				<view class="line">
					<view class="left"><p>预约时间</p></view>
					<view class="right"><p>{{list.appointmentTime}}</p></view>
				</view>
				</p>
				<p>
				<view class="line">
					<view class="left"><p>订单号</p></view>
					<view class="right"><p>{{list.orderNo}} <view class="typeName" @click="copyUrl(list.orderNo)">复制</view></p></view>
				</view>
				</p>
				<p>
				<view class="line">
					<view class="left"><p>预约金额</p></view>
					<view class="right"><p>￥{{(list.appointmentPriceFU/100).toFixed(2)}}</p></view>
				</view>
				</p>
				<p>
				<view class="line">
					<view class="left"><p>尾款金额</p></view>
					<view class="right"><p>￥{{(list.finalPriceFU/100).toFixed(2)}}</p></view>
				</view>
				</p>
				<p>
				<view class="line">
					<view class="left"><p>订单总额</p></view>
					<view class="right"><p>￥{{(list.totalPriceFU/100).toFixed(2)}} </p></view>
				</view>
				</p>
				<p>
				<view class="line">
					<view class="left"><p>建议技师接单等级</p></view>
					<view class="right"><p>{{list.level||"无"}}</p></view>
				</view>
				</p>
				<p>
				<view class="line">
					<view class="left"><p>服务开始时间</p></view>
					<view class="right"><p>{{list.serviceTime||"未开始"}}</p></view>
				</view>
				</p>
				<p>
				<view class="line">
					<view class="left"><p>服务完成时间</p></view>
					<view class="right"><p>{{list.completeTime||"未完成"}}</p></view>
				</view>
				</p>
			</view>
			<view class="lines">
				<u-line></u-line>
			</view>
			<view class="content3">
				备注：{{list.serviceRemark||'无'}}
			</view>
			<view class="lines">
				<u-line></u-line>
			</view>
			
			<view class="content3" >
				审核说明：{{level||'无'}}
			</view>
			<view class="lines">
				<u-line></u-line>
			</view>
			<view v-if="list.receiveStatus!=5">
				<span class="fontweight">订单收入</span>
				<view class="content4">
					<p>
					<view class="line">
						<view class="left"><p>等级金额</p></view>
						<view class="right"><p>￥{{(list.levelPrice/100).toFixed(2)}}</p></view>
					</view>
					</p>
					<p>
					<view class="line">
						<view class="left"><p>接单增价</p></view>
						<view class="right"><p>￥{{(list.incPriceFU/100).toFixed(2)}}</p></view>
					</view>
					</p>
					<p>
					<view class="line">
						<view class="left"><p>订单提成</p></view>
						<view class="right"><p>￥{{(list.commissionPrice/100).toFixed(2)}}</p></view>
					</view>
					</p>
					<p>
					<view class="line">
						<view class="left"><p>罚款金额</p></view>
						<view class="right"><p>￥{{(list.fine/100).toFixed(2)}}</p></view>
					</view>
					</p>
					<p>
					<view class="line">
						<view class="left"><p>总计</p></view>
						<view class="right"><p>￥{{(list.totalPrice/100).toFixed(2)}}</p></view>
					</view>
					</p>
					<p>
					<view class="line">
						<view class="left"><p>罚款备注：{{list.fineReason}}</p></view>
					</view>
					</p>
					
				</view>
				<view class="lines">
					<u-line></u-line>
					
				</view>
				<view v-if="list.receiveStatus==4">
					<span class="fontweight">完成照片</span>
					<view class="content5">
						<u-upload disabled
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							
						></u-upload>
					</view>
					<view class="lines">
						<u-line></u-line>
					</view>
					<span class="fontweight">工作照片</span>
					<view class="content5">
						<u-upload disabled
							:fileList="fileList2"
							@afterRead="afterRead"
							@delete="deletePic"
							name="2"
							multiple
							
						></u-upload>
					</view>
					<view class="lines">
						<u-line></u-line>
					</view>
					<span class="fontweight">门头照片</span>
					<view class="content5">
						<u-upload disabled
							:fileList="fileList3"
							@afterRead="afterRead"
							@delete="deletePic"
							name="2"
							multiple
							
						></u-upload>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:null,
				status: 'loadmore',//上滑加载函数
				technicianlatitude:"",
				technicianlongitude:"",
				level:"",//目前用户审核说明备注
				fileList4: [{
						url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					}
				],
				fileList1:[],
				fileList2:[],
				fileList3:[],
			}	
		},
	
		mounted(e) {
			//console.log(this.$route.query.id)
			//获取当前位置 需用户授权
			//this.getCurrentLocal()
			//this.julijiusan(); 14+6+2
			//this.show(this.$route.query.id)
		},
		onLoad(options) {
			console.log("sss："+JSON.stringify(options))
			if ('params' in options) {
			     let data = JSON.parse(decodeURIComponent(options.params));
			     console.log(JSON.stringify(data.id))
				  this.show(data)
				 
			}else{
				this.status = 'nomore';
			}
			/* ,{
				id:idnumber,
				orderNo:n,
			} */
			
		},
		onShow() {
			//获取当前位置
		},
		methods: {
			//查询订单信息
			show(data){
				this.request.getRequest(this.http.httpsLian.orderDispatchRecord,data, true)
				.then(res => { 
					this.status = 'nomore';
					if(res.code!=0 )return 
					console.log("sss："+JSON.stringify(res))
					this.list=res.data.list[0]
					if(this.list.signaturePicUrl!=null){
						let  list1=JSON.parse(this.list.signaturePicUrl)
						list1.forEach(itme=>{
							this.fileList1.push({
								url:itme.url
							})
						})
					}
					if(this.list.workingAchievementPicUrl!=null){
						let  list2=JSON.parse(this.list.workingAchievementPicUrl)
						list2.forEach(itme=>{
							this.fileList2.push({
								url:itme.url
							})
						})
					}
					if(this.list.workingAchievementPicUrl!=null){
						let  list2=JSON.parse(this.list.starServiceUrl)
						list2.forEach(itme=>{
							this.fileList3.push({
								url:itme.url
							})
						})
					}
					 this.showN(this.list.orderId)
					
					
				}).catch(res => {
					uni.$u.toast(res)
				})
			},
			showN(orderId){
				this.request.getRequest(this.http.httpsLian.homemakingOrderGetId,{id:orderId})
				.then(res => { 
					console.log("家政order服务完成单res",res)
					this.level=res.data.level
				}).catch(res => {
					uni.$u.toast(res)
				})
			},
			//联系客户
			getPhoneNumber(user_phone){
				uni.makePhoneCall({
				 	phoneNumber:user_phone,
				 	 success(res) {
				 	 	console.log(res,'拨打成功')
				 	 }
				})
			},
			// 获取当前地理位置 授权验证
			getCurrentLocal(){
			  let that = this;
			  wx.getSetting({
			    success(res) {
			      if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
			        wx.openSetting({
			          success(res) {}
			        })
			      }  else { // 第一次授权，或者已授权，直接调用相关api
			        that.getMyLocation()
					 
			      }
			    }
			  })
			},
			getMyLocation(){
				let that = this 
				uni.getLocation({
					type:"gcj02",
					success:function(res){
						console.log(res)
						that.technicianlatitude=res.latitude
						that.technicianlongitude=res.longitude
					}
				})
			},
			copyUrl(e) {
				wx.setClipboardData({data: e,
					success: function (res) {
						wx.showToast  ({
							title: '复制成功',icon: 'none',duration: 2000,
						});
					},
				});
			   
			},
			mapFun(itme){
				this.getCurrentLocal()
				console.log("latitude:"+itme.latitude)
				console.log("longitude:"+itme.longitude)
				//打开内置地图 导航唤醒手机高德地图 腾讯地图。
				uni.openLocation(
					{
						latitude: Number(itme.latitude),//纬度
						longitude:  Number(itme.longitude),//经度
						name:itme.userAddress,address:itme.address,
					}
				);
			},
			statuSwitch(item){
				switch(item) {
				    case 1:
				        return "未接单"
				    case 2:
				        return "待服务"
					case 3:
					   return "服务中"
					case 4:
					   return "已完成"
					case 5:
					   return "拒绝接单"	
					case 6:
					   return "取消"	 
				} 
			},
		}

	}
	
</script>

<style lang="scss" scoped>
page{
	
}	
.lines{
	padding: 5px 0px;
	margin-bottom: 10px;
}	
.line {
		height: 20px;
		margin-bottom:3px;
		.left{
			float: left;
		}
		.right{
			float: right;
		}
	}
.content{
	padding: 10px;
	background-color: white;
}	
.content1{
	margin-top: 10px;
	margin-bottom: 5px;
}
.content2{
//	background-color: red;
	height: 250px;
	padding-top: 10px;
	.itme1{
		float: left;
	}
	.itme2{
		float: right;
		text-align:right;
	}
	p{
		margin-bottom: 5px;
		font-size: 13px;
		//color: $uni-text-color-placeholder;
	}
	.typeName{
		margin-left: 5px;
		background-color: white;
		font-size: 22rpx;
		color:$Main-green-color;
		display: inline-block;
		position: relative;
		/* top:-33px;
		 left: 70px; */
	}
}
.content3{
	margin-bottom: 10px;
}
.fontweight{
		font-weight: 550;
		text{
			margin-left: 20px;
		}
}
.content4{
	margin-top: 10px;
	height: 130px;
	//background-color: red;
	.itme1{
		float: left;
	}
	.itme2{
		float: right;
		text-align:right;
	}
	p{
		margin-bottom: 5px;
		font-size: 13px;
		//color: $uni-text-color-placeholder;
	}
}
.content5{
	padding: 10px 0px;
}
</style>
